<template>
  <div class="cars-wrap">
    <div class="cars-swiper-wrap">
      <swiper ref="swiper" class="swiper" :options="swiperOption">
        <swiper-slide v-for="item in carsList" :key="item.id" >
          <cars-item height="800px" :carInfo="item" />
        </swiper-slide>
      </swiper>
      <div class="swiper-button-prev" slot="button-prev" @click="prev()" ></div>
      <div class="swiper-button-next" slot="button-next" @click="next()"></div>
    </div>
  </div>

</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
import CarsItem from "@c/carsList";
import { getCars } from "@/api/cars.js"


export default {
  name: "Cars",
  components: {
    Swiper,
    SwiperSlide,
    CarsItem
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 50,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      carsList: [],
    };
  },
  methods: {
    go() {
      this.$router.push("/user");
    },
		prev() {
			this.$refs.swiper.$swiper.slidePrev();
		},
		next() {
			this.$refs.swiper.$swiper.slideNext();
    },
    getCarsHandle(requestData) {
      getCars(requestData)
        .then((res) => {
          console.log(res)
          this.carsList = res.data.data;
        })
    }
	}
};
</script>

<style lang="scss" scoped>
.cars-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 94px;
  z-index: 99999;
  .cars-swiper-wrap {
    position: relative;
    padding: 0 155px;
    .swiper-button-next,.swiper-button-prev {
      top: 50%;
      width: 60px;
      height: 100px;
      margin-top: -50px;
      border-radius: 100px;
      background: #fff;
      @include webkit(box-shadow,0 0 18px 0 rgba(0,0,0,.2));
      @include webkit(transition,all 0.3s ease 0s);
      // &.swiper-button-disabled {
      //   opacity: 1;
      // }
      &:hover {
        background: $color-main;
      }
    }
    .swiper-button-next {
      right: 53px;
      &:after {
        content: "";
        width: 17px;
        height: 17px;
        border-right: 3px solid #000;
        border-top: 3px solid #000;
        margin-right: 5px;
        @include webkit(transform, rotate(45deg));
        @include webkit(box-sizing,border-box);
      }
      &:hover {
        &:after {
          border-right: 3px solid $color-blur;
          border-top: 3px solid $color-blur;     
        }
      }
    }
    .swiper-button-prev {
      left: 53px;
       &:after {
        content: "";
        width: 17px;
        height: 17px;
        border-left: 3px solid #000;
        border-top: 3px solid #000;
        margin-left: 5px;
        @include webkit(transform, rotate(-45deg));
        @include webkit(box-sizing,border-box);
      }
      &:hover {
        &:after {
          border-left: 3px solid $color-blur;
          border-top: 3px solid $color-blur;     
        }
      }
    }
    .swiper-container {
      overflow: initial;
    }
  }
}
</style>